/**
 * @file tea
 * @date 2024/7/28
 * @author Yi Tao
 * @description Description
 */

/*主要内容部分*/
.content {
    width: 100%;
}

/*筛选部分*/
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    font-size: 20px;
    padding: 0 150px;
    background-color: rgba(213, 213, 213, 0.34);
}

.teaType-selector li {
    display: inline-block;
    width: 70px;
    font-size: 16px;
    color: #bdbdbd;
}

.tea-container {
    width: 90%;
    margin: 0 auto;
    padding: 10px 50px;
}

.tea-item {
    display: inline-block;
    margin: 10px 5px;
    width: 19%;
    height: 40%;
    animation: display 1s ease;
}

@keyframes display {
    0% {
        opacity: 0;
        transform: translateY(80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.tea-item > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.lineBetween {
    width: 100%;
    background-color: #d5d5d5;
    margin: 10px auto;
}

.tea-item img {
    width: 100%;
}

.tea-item button {
    font-size: 14px;
    padding: 5px 8px;
    color: #878787;
    border: 1px solid #bebebe;
}

hr {
    width: 0;
    transition: 0.4s linear;
}

.tea-item:hover p {
    color: #519f10;
}

.tea-item:hover hr {
    width: 100%;
    border: 1px solid #519f10;
}

.tea-item:hover button {
    color: #519f10;
    border: 1px solid #519f10;
}

/*换页*/
.pageFeed {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    color: #519f10;
}

.n-l-btn {
    width: 60px;
    color: #519f10;
    border: 1px solid white;
    background-color: #f1f1f1;
}

#pageBtnList {
    display: flex;
}

#pageBtnList li {
    margin: 0 5px;
    color: #519f10;
}

#pageBtnList li button {
    width: 20px;
    color: #519f10;
    border: 1px solid white;
    background-color: #f1f1f1;
}

#pageBtnList li .selectedBtn {
    border: 1px solid #bebebe;
    background-color: white;
}